<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/m-music-list.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2237284_qox19kxb3xa.css">
    <title>Mobile music-list</title>
</head>

<body>

    <div class="wrap">
        <!-- 头部开始 -->
        <h1>排行榜</h1>
        <!--头部结束  -->
        <!-- 榜单推荐开始 -->
        <h2>榜单推荐</h2>
        <ul class="recommend">
            <li>
                <a class="music-pic"><img src="../img/m-list/list-1.jpg" alt="">
                    <div class="list-intro">
                        <i class="iconfont icon-bofang1"></i>
                        <p>每天更新</p>
                    </div>
                </a>
                <p>电音榜</p>
            </li>
            <li>
                <a class="music-pic"><img src="../img/m-list/list-2.jpg" alt="">
                    <div class="list-intro">
                        <i class="iconfont icon-bofang1"></i>
                        <p>每天更新</p>
                    </div>
                </a>
                <p>潜力爆款榜</p>
            </li>
            <li>
                <a class="music-pic"><img src="../img/m-list/list-3.jpeg" alt="">
                    <div class="list-intro">
                        <i class="iconfont icon-bofang1"></i>
                        <p>每天更新</p>
                    </div>
                </a>
                <p>畅销榜</p>
            </li>
        </ul>
        <!-- 榜单推荐结束 -->
        <!-- 官方榜单开始 -->
        <h2>官方榜</h2>
        <div class="music-content">
            <a  class="music-pic"> <img src="../img/m-list/list-4.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>飙升榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">Not Angry</span>
                    <span class="singer">Chris James</span>
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">天黑黑</span>
                    <span class="singer">孙燕姿</span>
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">是但求其爱</span>
                    <span class="singer">陈奕迅</span>
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
        <div class="music-content">
            <a  class="music-pic"> 
                <img src="../img/m-list/list-5.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>新歌榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">不容</span>
                            <span class="singer">一支榴莲</span>
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">朝露人间</span>
                            <span class="singer">国风堂</span> 
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">石头</span>
                    <span class="singer">黄仁德</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
           <div class="music-content">
            <a href="" class="music-pic"> <img src="../img/m-list/list-6.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>华语榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">奔山赴海去见你</span>
                            <span class="singer">阿冗</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">伊甸园</span>
                    <span class="singer">汪苏泷</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">火烧云</span>
                    <span class="singer">陈泓宇</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
        <div class="music-content">
            <a  class="music-pic"> <img src="../img/m-list/list-7.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>原创榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">方向</span>
                            <span class="singer">白鲨</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">天黑黑</span>
                    <span class="singer">孙燕姿</span>
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">芒</span>
                    <span class="singer">李润祺</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
        <div class="music-content">
            <a  class="music-pic"> <img src="../img/m-list/list-8.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>热歌榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">卡尔</span>
                    <span class="singer">孟月凡</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">淤泥</span>
                    <span class="singer">三块木头</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">你和冬天如约而至</span>
                    <span class="singer">无名之爱</span> 
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
        <div class="music-content">
            <a  class="music-pic"> <img src="../img/m-list/list-9.jpg" alt="">
                <div class="list-intro">
                    <i class="iconfont icon-bofang1"></i>
                    <p>人气榜</p>
                </div>
            </a>
            <ul class="ranking">
                <li>
                    <span class="number">1</span>
                    <span class="song-name">柔软</span>
                    <span class="singer">彭楚粤</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">2</span>
                    <span class="song-name">苦尽甘来</span>
                    <span class="singer">翁梓铭</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
                <li>
                    <span class="number">3</span>
                    <span class="song-name">一生久</span>
                    <span class="singer">GTO杉菜</span>  
                    <i class="iconfont icon-xihuan"></i>
                    <a href=""><i class="iconfont icon-bofang1"></i></a>
                    <i class="iconfont icon-46-copy-copy-copy"></i>
                </li>
            </ul>
        </div>
<!-- 官方榜单结束 -->
    </div>
    <!-- 脚部开始 -->
    <ul class="footer">
        <li><a href="../m-index.html">首页</a></li>
        <li><a href="./m-music-list.html">排行榜</a></li>
        <li><a href="./m-singerInfo.html">歌手</a></li>
        <li><a href="./m-information.html">我的</a></li>
    </ul>
    <!-- 脚部结束 -->
</body>

</html>